Day20——JavaScript Proxy代理物件基礎

2024 iThome 鐵人賽

佛心分享-IT 人自學之術

JavaScript自學分享系列第 20 篇

16th鐵人賽

姐姐恩

2024-10-13 21:04:17

66 瀏覽

分享至

大家好～我是姐姐恩！身為資訊小白的我，起初對於參賽主題非常苦惱，最後決定利用此次機會，延續學校的課(Java)，了解網頁前端三劍客之一的JavaScript！
所以接下來30天，我將在這裡紀錄我當天的學習筆記及統整後的學習內容，請大家多多指教！
＊學習內容主要取自MDN Web Docs及彭彭老師的YT課程。

JavaScript Proxy代理物件基礎

代理物件:其中的「代理」，指的是對標物件執行如取得物件的屬性、將資料放入物件等的基本操作，去改變目標物件，或是作為中介。

用途:

取得經過加工處理的的屬性資料。
驗證物件的屬性資料。
綁定物件的屬性資料和使用者介面。

基本語法:

//建構式
new Proxy(目標物件,包裝處理函式的物件);

//代理物件的建立
let 目標物件 = 某個物件實體;
let ref = new Proxy(目標物件,{
    get:function(目標物件,想要取得的屬性名稱){ 
    //此行中輸寫的目標物件名稱可任意取，因為都將代表上一行的，一開始就設定的目標物件。
        return 自定義的屬性資料;
    }
});

//代理物件的使用
console.log(ref,x); //假設x為想要取得的屬性名稱。
//取得物件屬性時，執行上述的get函式並取得回傳值。

程式碼練習&註解筆記:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Proxy 代理物件基礎</title>
    </head>
    <body>
        <script>
            //建立代理物件
            let data={
                price:100,
                count:5
            };
            let proxy = new Proxy(data,{
                get:function(target, property){ //使用代理物件取得屬性資料的時候，會對應的函式。
                    //console.log("代理的目標物件", target);
                    //console.log("想要取得的屬性名稱",property);
                    //return "屬性對應的資料"; //決定屬性要對應什麼資料。

                    if(property==="total"){ //如果想要的屬性名稱為 total，則做一個乘法的組合去算出總價。
                        return target.price*target.count; 

                    }else{ //如果是其他的屬性，就按照原本的目標物件組合作回應。
                        return target[property];
                    }
                    
                }
            });

            //使用代理物件，取得物件的屬性資料
            /*console.log(proxy.abc);*/ 

            //取得屬性的動作，就代表呼叫get函式。
            //property = abc，abc在get函式中，會被放在property裡面。
            //回傳值(回傳的資料)就是proxy.abc，故印出proxy.abc將呈現回傳值。
            //用代理物取得物件的屬性時，具體上就是呼叫get function。

            //得到總價
            console.log("總價", proxy.total);
            console.log("單價", proxy.price); //因為也是透過get函式處理的，故也回傳總價，印出500。

        </script>
    </body>
</html>

學習資源:
JavaScript Proxy 代理物件基礎 - Front End 網頁前端工程教學